<template>
  <div>
    <!-- 添加轮播图按钮 -->
    <button @click="lunbotu">添加轮播图</button>
    <!-- 图片上传组件 -->
    <el-upload
      v-model:file-list="fileList"
      list-type="picture-card"
      :on-preview="handlePictureCardPreview"
      :on-remove="handleRemove"
      :headers="headers"
      :auto-upload="false"
      :action="uploadUrl"
    >
      <el-icon><Plus /></el-icon>
    </el-upload>

    <!-- 图片预览对话框 -->
    <el-dialog v-model="dialogVisible">
      <img w-full :src="dialogImageUrl" alt="Preview Image" />
    </el-dialog>
  </div>
</template>

<script lang="ts" setup>
import { ref } from "vue";
import { Plus } from "@element-plus/icons-vue";
import type { UploadProps, UploadUserFile } from "element-plus";
import axios from "axios";
import { carouselAdd } from "@/api/carousel";

// 定义请求参数
const fileList = ref<UploadUserFile[]>([]); // 存储上传的文件列表，初始化为空数组
const uploadUrl = fileList; // 例如：https://example.com/api/upload
const headers = ref({
  Authorization: "Bearer your-token", // 如果需要
});
const alt = ref("图片没有描述"); // 用于存储图片描述
const link = ref("没有连接地址"); // 用于存储链接地址
const dialogImageUrl = ref(""); // 用于存储预览图片的地址
const dialogVisible = ref(false); // 控制预览对话框的显示与隐藏

// 添加轮播图请求函数
async function lunbotu() {
  console.log(fileList);

  // 检查是否有图片上传
  if (fileList.value.length === 0) {
    alert("请先上传图片");
    return;
  }

  // 创建 FormData 对象
  const formData = new FormData();
  fileList.value.forEach((file) => {
    formData.append("file", file.raw);
  });

  try {
    // 上传文件
    const uploadResponse = await axios.post(uploadUrl.value, formData, {
      headers: {
        "Content-Type": "multipart/form-data",
        ...headers.value,
      },
    });

    // 假设上传成功后，服务器返回的文件 URL 在 response.data.url 中
    const fileUrl = uploadResponse.data.url;

    // 调用 carouselAdd 接口
    const addResponse = await carouselAdd(fileUrl, alt.value, link.value);
    console.log(addResponse.data); // 输出请求响应数据
    alert("轮播图添加成功");
  } catch (error) {
    console.error("上传或添加轮播图失败", error);
    alert("上传或添加轮播图失败，请检查网络连接或文件格式");
  }
}

// 文件上传成功后的回调函数
const handleUploadSuccess: UploadProps["onSuccess"] = (
  response,
  uploadFile
) => {
  // 假设 response 中包含上传成功后的文件信息，如 url 等
  // 更新 fileList 中对应文件的信息
  const index = fileList.value.findIndex((file) => file.uid === uploadFile.uid);
  if (index !== -1) {
    fileList.value[index] = {
      ...fileList.value[index],
      url: response.url, // 假设 response.url 是上传成功后的文件地址
    };
  }
  console.log("文件上传成功", response, uploadFile);
};

// 文件移除时的回调函数
const handleRemove: UploadProps["onRemove"] = (uploadFile, uploadFiles) => {
  console.log("文件移除", uploadFile, uploadFiles);
};

// 图片预览时的回调函数
const handlePictureCardPreview: UploadProps["onPreview"] = (uploadFile) => {
  dialogImageUrl.value = uploadFile.url!;
  dialogVisible.value = true;
};
</script>

<style lang="css">
/* 样式部分根据实际需求添加 */
</style>
